<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>设备联动</title>
    <style>
        *{margin:0px;padding:0px;}
        body{
            background-color: #EBEBEB;
            background-size: cover;
            font-family: 黑体;
            font-size: 13px;
        }
        .content{
            margin:1px;
            padding:1px;
        }
        .title{
            margin: 10px 12px 5px 12px;
            background-color: #FFFFFF; 
            text-align: center;
            padding: 7px 0;
            box-shadow: 3px 3px 3px #e1e1e1;
        }
        .title span{
            color: #000000;
            /*color: #229B32;*/
            font-size: 18px;
            /*font-weight: bolder;*/
            position: relative;
        }
        .temphumishow{
            margin: 5px 12px;
            height: 94px;
            background-color: #FFFFFF;
            text-align: center;
            box-shadow: 3px 3px 3px #e1e1e1;
        }
        .temphumishow table tr td img{
            height: 50px;
        }
        .tempcls{
            font-size: 30px;
            color: #e13e4e; 
        }
        .humicls{
            font-size: 30px;
            color: #80a72d; 
        }
        .switrgbhow{
            margin: 5px 12px;
            height: 114px;
            background-color: #FFFFFF;
            text-align: center;
            box-shadow: 3px 3px 3px #e1e1e1;
        }        
        .switrgbhow table tr td img{
            height: 70px;
        }
        .humihis{
            margin: 5px 12px;
            height: 215px;
            background-color: #FFFFFF;
            text-align: center;
            box-shadow: 3px 3px 3px #e1e1e1;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="title">
          <span>温湿度实时检测</span>
        </div>        
        <div class="temphumishow">
            <table width="100%" height="94px">
                <tr align="center">
                    <td valign="middle" align="right"><img src="./image/01-temperature.svg" alt=""></td>
                    <td valign="middle" align="left">&nbsp;&nbsp;<span>温度</span><br/>&nbsp;&nbsp;<span class="tempcls" id="tempid">28℃</span></td>
                    <td valign="middle" align="right"><img src="./image/01-humidity.svg" alt=""></td>
                    <td valign="middle" align="left">&nbsp;&nbsp;<span>湿度</span><br/>&nbsp;&nbsp;<span class="humicls" id="humiid">42%</span></td>
                </tr>
            </table>
        </div>        
        <div class="switrgbhow">
            <table width="100%">
                <tr align="center" height="114px">
                    <td valign="middle"><img id="switchbtn" src="./image/03-turn-on.svg" alt=""><br/><span id="switchspan">开</span></td>
                    <!-- <td valign="middle"><hr class="hrline" size="80" /></td> -->
                    <td valign="middle"><img id="rgbimgid" src="./image/02-red.svg" alt=""><br/><span>温度阀值</span></td>
                </tr>                
            </table>
        </div>
        <!-- <div class="humihis">
            <div id="device_id"></div>
            <div id="debug"></div>
        </div> -->
    </div>
</div>
<script src="./js/mqttws31.js"></script>
<script src="./js/jquery-2.1.3.js"></script>
<script>
    // 从url中获取某个参数的值
    function getParameterByName(name) {
        var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
        return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
    }
    // 得到设备ID
    var device_id = getParameterByName('device_id');
    // 如果设备ID不为空，则执行连接MQTT的操作
    if ( device_id !== null ){
        ez_connect(device_id);
    }

    // 连接MQTT服务
    function ez_connect(device_id) {
        // 获取access_token
        // access_token是公众号的全局唯一票据，公众号调用各接口时都需使用access_token。
        // 正常情况下access_token有效期为7200秒，重复获取将导致上次获取的access_token失效
        var access_token = getParameterByName('access_token');

        // document.getElementById('device_id').innerHTML = "DeviceID = "+device_id;

        // websocket连接
        // wsbroker:host
        // wsport:端口 默认1983
        // Client-ID ： v1_web_[MAC]  //版本号_app_手机MAC(必须是12位小写)
        var wsbroker = "api.easylink.io";  //mqtt websocket enabled broker
        var wsport = 1983 // port for above
        var client = new Paho.MQTT.Client(wsbroker, wsport, "v1-web-" + parseInt(Math.random() * 1000000, 12));

        // 基本参数配置
        // 连接丢失所对应的callback函数
        client.onConnectionLost = onConnectionLost;
        // 消息到达所对应的callback函数
        client.onMessageArrived = onMessageArrived;
        // 连接成功所对应的callback函数
        client.connect({onSuccess:onConnect});

        // 连接成功
        function onConnect() {
            var subtopic = device_id+'/out/#';
            // Once a connection has been made, make a subscription and send a message.
            // 向某个通道发送指令
            // topic：通道
            // commond：指令
            client.publish = function(topic, commond) {
                // console.log("现在执行-->:"+commond);
                message = new Paho.MQTT.Message(commond);
                message.destinationName = topic;
                client.send(message);
            }
            // console.log("device_id:"+device_id);
            console.log("onConnect");
            client.subscribe(subtopic, {qos: 0});
        }
        // 连接丢失
        function onConnectionLost(responseObject) {
            if (responseObject.errorCode !== 0)
                console.log("onConnectionLost:"+responseObject.errorMessage);
        }
        // 消息到达
        // var msgindex = 1;
        var msgjson;
        function onMessageArrived(message) {
            // console.log(message.topic + ': ' +  message.payloadString);
            // if(msgindex > 12 ){
            //     msgindex =1;
            //     document.getElementById('debug').innerHTML = "";
            // }
            // msgindex++;
            // console.log('设备上报:' +  message.payloadString);
            msgjson = $.parseJSON(message.payloadString);
            // console.log('温度 ' +  msgjson.dht11_temperature);
            var tempval = msgjson.dht11_temperature;
            // console.log('温度2 ' +  tempval);
            if("undefined" != typeof(tempval)){
                // 显示温度
                $("#tempid").text(tempval+"℃");
                // 显示湿度
                $("#humiid").text(msgjson.dht11_humidity+'%');
                // 温度超过29则红灯亮，20-29之间则绿灯亮，低于20黄灯亮
                if(tempval > "29"){
                    led_red();
                    $("#rgbimgid").attr("src", "./image/02-red.svg");
                }else if(tempval < "30" && (tempval > "19")){
                    led_green();
                    $("#rgbimgid").attr("src", "./image/02-green.svg");
                }else if(tempval < "20"){
                    led_yellow();
                    $("#rgbimgid").attr("src", "./image/02-yellow.svg");
                }
            }
        }

        // 控制按钮显示的事件
        $("#switchbtn").click(function() {
            var topic = device_id+'/in';
            var commond;
            var swtimg = $("#switchbtn").attr("src");
            if("./image/03-turn-on.svg" == swtimg){
                commond = '{"device_switch":false}';
                $("#switchbtn").attr("src", "./image/03-turn-off.svg");
                $("#switchspan").text("关");
            }else{
                commond = '{"device_switch":true}';
                $("#switchbtn").attr("src", "./image/03-turn-on.svg");
                $("#switchspan").text("开");
            }
            client.publish(topic, commond);
        });

        function led_red() {
            var topic = device_id+'/in';
            var commond = '{"rgbled_switch":true,"rgbled_hues":0, "rgbled_saturation":100, "rgbled_brightness":100}'; 
            client.publish(topic, commond);
        }

        function led_green() {
            var topic = device_id+'/in';
            var commond = '{"rgbled_switch":true,"rgbled_hues":120, "rgbled_saturation":100, "rgbled_brightness":100}'; 
            client.publish(topic, commond);
        }

        function led_yellow() {
            var topic = device_id+'/in';
            var commond = '{"rgbled_switch":true,"rgbled_hues":60, "rgbled_saturation":100, "rgbled_brightness":100}'; 
            client.publish(topic, commond);
        }
    }

    // 日志打印在页面的部分    
    // var i = 0;
    // console.log = (function(old_funct, div_log) {
    //     return function(text) {
    //         old_funct(text);
    //         var p = '';
    //         if (i%2 == 0)
    //             p = '<p>';
    //         else
    //             p = '<p class=\'gray\'>';

    //         if (typeof text === "object")
    //             div_log.innerHTML += p + JSON.stringify(text) + '</p>';
    //         else
    //             div_log.innerHTML += p + text + '</p>';

    //         div_log.scrollTop = div_log.scrollHeight;
    //         i += 1;
    //     };
    // } (console.log.bind(console), document.getElementById("debug")));
    // console.error = console.debug = console.info =  console.log;

</script>
</body>
</html>
